<template>
  <div class="word-rotate-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <s-word-rotate :data="wordRotate" :width="400" :height="300" activeBg="#004590"></s-word-rotate>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in wordRotateProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in wordRotateMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'WordRotateDemo',
    data() {
      return {
//词云组件
        wordRotate: ['人工智能', 'AI', '网络安全', '优化设计', '大数据', '神经网络', '云计算', '图像处理', '软件工程', '数据采集', '专家系统', '故障诊断', '数据挖掘', '遗传算法', '模式识别', '机器人'],
        wordRotateProps: [
          { name: 'activeBg', desc: '默认值：#000。hover高亮文字的背景颜色。' },
          { name: 'data', desc: '默认值：[]。要显示在词云中的文字。例如：["人工智能","自动化","AI"]。' },
          { name: 'colorLists', desc: "默认值：['#4192d6', '#c8c3f1', '#8dc9b0', '#71c3f0', '#f88', '#d674ff']。词云中的文字颜色。" },
          { name: 'width', desc: "默认值：400。词云的宽度。" },
          { name: 'height', desc: "默认值：400。词云的高度。" },
        ],
        wordRotateMethods: [
          { name: 'active-item', desc: '参数：当前点击的文字。点击某个文字时触发。' },
        ],
      }
    },
    methods: {

    },
    mounted() {

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .word-rotate-demo-wrapper{
    width:100%;
    height:100%;
  }

</style>
